<template>
  <view v-if="shenheStatus == 0" class="my_coupon_box">
    <u-tabs-swiper
      ref="tabs"
      name="cate_name"
      count="cate_count"
      :list="list"
      :is-scroll="false"
      active-color="red"
      :current="current"
      @change="tabsChange"
    ></u-tabs-swiper>
    <view class="item_container">
      <view
        class="coupon_item"
        v-for="(item, index) in couponList"
        :key="index"
        @click="$utils.toUrl('/user/my_coupon/my_coupon_detail')"
        :style="'background-image: url(' + asyncImgs.my_coupon.ietm_bg + ');'"
      >
        <view style="flex: 1; color: #fff; text-align: center">
          <view style="font-size: 38rpx">
            <text style="font-size: 24rpx">￥</text>20.00
          </view>
          <view style="font-size: 24rpx">
            {{ item.name }}
          </view>
        </view>
        <view style="flex: 3; padding-left: 35rpx">
          <view style="font-size: 34rpx"> 福清市三华矿泉水有限公司 </view>
          <view style="font-size: 24rpx; color: #666666">
            2021.04.13 18:33 ~ 2022.04.13 18:33
          </view>
          <view style="font-size: 24rpx; color: #666666">
            仅限甜心小哥、产品使用
          </view>
        </view>
      </view>
      <view style="padding-top: 30rpx" v-if="couponList.length == 0">
        <u-empty text="暂无卡券" mode="coupon"></u-empty>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: {
    Shenhe,
  },
  props: {},
  data() {
    return {
      current: 0,
      couponList: [],
      list: [
        {
          cate_name: this.$t('coupon.noUse'),
        },
        {
          cate_name: this.$t('coupon.failure'),
        },
      ],
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.myCardCoupon'),
    });
  },
  created() {},
  onReachBottom() {},
  methods: {
    tabsChange(val) {
      this.current = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.my_coupon_box {
  height: 100vh;
  background-color: rgb(247, 247, 247);
}
.item_container {
  padding: 30rpx;
}
.coupon_item {
  width: 100%;
  height: 160rpx;
  display: flex;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 20rpx;
}
</style>
